<template>
  <div class="consult-list">
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="长者姓名 / 咨询人姓名 / 咨询人联系电话"
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" class="add-btn" @click="handleAdd">
        <el-icon><Plus /></el-icon>新增
      </el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading">
      <el-table-column prop="elderName" label="长者姓名" width="120" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="consultantName" label="咨询人" width="120" />
      <el-table-column prop="relationship" label="与长者关系" width="120" />
      <el-table-column prop="phone" label="咨询人联系电话" width="150" />
      <el-table-column prop="intentLevel" label="意向程度" width="120" />
      <el-table-column prop="intentDescription" label="意向说明" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="nextFollowDate" label="下次跟进日期" width="150" />
      <el-table-column prop="followPerson" label="跟进人" width="120" />
      <el-table-column prop="followNote" label="跟进说明" width="180" />
      <el-table-column prop="firstConsultTime" label="首次咨询时间" width="150" />
      <el-table-column prop="firstReception" label="首次接待人" width="120" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus } from '@element-plus/icons-vue'
import type { ConsultRecord } from '@/types/consult'
import { useRouter } from 'vue-router'
import { getRecords, deleteRecord } from '@/services/consult'

// 搜索相关
const searchQuery = ref('')
const loading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 表格数据
const tableData = ref<ConsultRecord[]>([])

const router = useRouter()

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const { records, total: totalCount } = getRecords(
      currentPage.value,
      pageSize.value,
      searchQuery.value,
    )
    tableData.value = records
    total.value = totalCount
  } catch (error) {
    ElMessage.error('加载数据失败')
  } finally {
    loading.value = false
  }
}

// 获取状态标签类型
const getStatusType = (status: string) => {
  const statusMap: { [key: string]: string } = {
    跟进中: 'warning',
    已完成: 'success',
    已终止: 'info',
  }
  return statusMap[status] || 'default'
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

// 处理重置
const handleReset = () => {
  searchQuery.value = ''
  currentPage.value = 1
  loadData()
}

// 处理新增
const handleAdd = () => {
  router.push('/consult/add')
}

// 处理编辑
const handleEdit = (row: ConsultRecord) => {
  router.push(`/consult/edit/${row.id}`)
}

// 处理删除
const handleDelete = (row: ConsultRecord) => {
  ElMessageBox.confirm(`确定要删除 ${row.elderName} 的咨询记录吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      if (deleteRecord(row.id)) {
        ElMessage.success('删除成功')
        loadData()
      } else {
        ElMessage.error('删除失败')
      }
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

// 处理分页大小变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadData()
}

// 处理页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.consult-list {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.search-input {
  width: 300px;
}

.add-btn {
  margin-left: auto;
}

:deep(.el-table) {
  flex: 1;
  margin: 0;
}

:deep(.el-table__inner-wrapper) {
  height: 100%;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  font-size: 13px;
}

:deep(.el-table td) {
  font-size: 13px;
}

:deep(.el-pagination) {
  justify-content: flex-end;
  margin-top: 20px;
  flex-shrink: 0;
}

:deep(.el-button--primary) {
  --el-button-bg-color: #409eff;
}

:deep(.el-button--text) {
  padding: 0 4px;
}

:deep(.el-table .cell) {
  white-space: nowrap;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}
</style>
